﻿(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {

        init: function (element, options) {
            var that = this;
            this._media = matchMedia("(max-aspect-ratio: 1/1)");
            this._media.addListener(this._mediaListener = function () {
                // BUG: Turns out that in my haste to get to the end of the talk I had 
                //  ignored Ryan prompting me to fix the initial value of the control
                //  to be based on the media query :). Turns out I needed to do that...
                that.element.querySelector(".win-listview").winControl.layout.orientation = that.orientation;
            });

            // NOTE: in order to allow functions in the declartive attributes they must be marked
            //       with the supportedForProcessing bit. WinJS.UI.eventHandler is a helper which
            //       does this for you.
            this.onadd = WinJS.UI.eventHandler(this._onadd.bind(this));
            this.oniteminvoked = WinJS.UI.eventHandler(this._oniteminvoked.bind(this));
        },

        // FIX: add the orientation property (see HTML for usage)
        orientation: {
            get: function () { return this._media.matches ? "vertical" : "horizontal"; }
        },

        // NOTE: Remember to cleanup after a page if you have things like global event handlers.
        dispose: function () {
            this._media.removeListener(this._mediaListener);

            // NOTE: if you take over dispose from the default implementation then you have also
            //       taken over responsiblity to clean up your children.
            WinJS.Utilities.disposeSubTree(this.element);
        },

        _onadd: function () {
            WinJS.Navigation.navigate("/pages/add/add.html");
        },

        _oniteminvoked: function (args) {
            // NOTE: Second argument gets passed to target page as "options"
            WinJS.Navigation.navigate("/pages/charts/charts.html", 
                Data.list.getAt(args.detail.itemIndex));
        },

    });


})();
